<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../../common/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../common/js/bootstrap-3.3.7-dist/css/bootstrap-datatimepicker.4.14.47.min.css" />

		<link rel="stylesheet" type="text/css" href="../../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/manager.css" />

		<script src="../../../common/js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script ssrc="../../../common/js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../common/js/bootstrap-3.3.7-dist/js/moment-with-locales.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../common/js/bootstrap-3.3.7-dist/js/bootstrap-datatimepicker.4.14.47.js" type="text/javascript" charset="utf-8"></script>

		<!--画图插件-->
		<script src="../../js/Chart.addTest.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">

		</style>
	</head>

	<body>
		<div id="wrap">
			<div id="main">
				<div id="header">
					<a id="headImg" href="../kaoqin/index2.html"><img class="headImg" src="../../images/12.png" /></a>
					<p id="headTitle" style="font-size: 16px;">综合报表</p>
				</div>
				<div id="content">
					<div>
						<div style="padding-left: 0.29rem;height: 6vh;font-size: 0.416666rem!important;margin-bottom: 0.3rem;border-bottom: 45px solid #fff;">
							<span style="float: left;height: 6vh;line-height: 6vh; font-size: 0.38rem;">时间：</span>
							<div class="form-group" style="float: left;width: 3.5rem;margin-top: 8px;">
								<div class="input-group date" id='date1'>
									<input id="dateInput1" type="text" unselectable="on" class="form-control" style="height: 0.65rem;">
									<span class="input-group-addon" style="height: 0.555555rem;padding: 0;">  
					                    <i style="color: #e93340;height: 0.416666rem;" class="glyphicon glyphicon-calendar"></i>  
					                </span>
								</div>
							</div>
							<span style="color: #e93340;float: left;height: 6vh;line-height: 6vh;margin: 0 0.3rem;">—</span>
							<div class="form-group" style="float: left;width: 3.5rem;margin-top: 8px;">
								<div class="input-group date" id='date2'>
									<input id="dateInput2" type="text" class="form-control" style="height: 0.65rem;">
									<span class="input-group-addon" style="height: 0.555555rem;padding: 0;">  
					                    <i style="color: #e93340;height: 0.416666rem;" class="glyphicon glyphicon-calendar"></i>  
					                </span>
								</div>
							</div>

						</div>
						<p class="titleInte">奖分统计图</p>
						<div class="jifenBox " style="padding-left: 0.5rem;">
							<div class="jifenContent">
								<p>
									<div style="background-color: #ad6f6d;"></div>
									<a href="./zonghe_jichu.html"><span >基础积分：<label id="a">0</label> </span></a>
								</p>
								<p>
									<div style="background-color: #6eaead;"></div>
									<a href="./zonghe_kaoqin.html"><span>考勤积分：<label id="b">0</label> </span></a>
								</p>
								<p>
									<div style=" background-color:#706fac;"></div>
									<a href="./zonghe_xingdong.html"><span>行动积分：<label id="c">0</label> </span></a>
								</p>
							</div>

						</div>
						<div style="text-align: center;">
							<canvas id="canvas" height="175" width="175" style="margin: 0 auto;"></canvas>
							<canvas id="canvas1" height="175" width="175" style="margin: 0 auto;"></canvas>
							<canvas id="canvas2" height="175" width="175" style="margin: 0 auto;"></canvas>

						</div>
					</div>

				</div>
			</div>
			<div id="foot" class="row">
				<a class="foot col-xs-3 col-sm-3" href="../kaoqin/index2.html">
					<img class="footImg" src="../../images/guanlixuanzhong.png" />
					<p>管理</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../coalition/colalition.html">
					<img class="footImg" src="../../images/lianmengchushi.png" />
					<p>联盟</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../store/store.html">
					<img class="footImg" src="../../images/11.png" />
					<p>商城</p>
				</a>
				<a class="foot col-xs-3 col-sm-3" href="../personage/personIndex.html">
					<img class="footImg" src="../../images/13.png" />
					<p>我的</p>
				</a>
			</div>
		</div>

	</body>
	<script src="../../js/handlebars-v2.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/rhAdmin.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		function getData(a,b,c) {
			$("#a").html(a);
			$("#b").html(b);
			$("#c").html(c);
			return [{
				value: a,
				color: "#ad6f6d",
				text: (parseInt(a/(a+b+c)*100)+"%")
			}, {
				value: b,
				color: "#6eaead",
				text: (parseInt(b/(a+b+c)*100)+"%")
			}, {
				value: c,
				color: "#706fac",
				text: (parseInt(c/(a+b+c)*100)+"%")
			}]
		}
		var pieData;
		var bool = false;
		var bool1 = true;
		var bool2 = true;
		$(function() {
		
			//var myPie = new Chart(canvas.getContext("2d")).Pie(getData(Math.ceil(Math.random()*10000),Math.ceil(Math.random()*10000),Math.ceil(Math.random()*10000)));
			$('#canvas').css('display', 'block')
			$('#canvas1').css('display', 'none')
			$('#canvas2').css('display', 'none')
			$("#date1").click(function() {
				
			})
			$("#date2").click(function() {
					
			})
				<!--http://eonasdan.github.io/bootstrap-datetimepicker/Options/#widgetpositioning  参数详解-->
			var selectDate1 =  $('#date1').datetimepicker({
				format: 'YYYY-MM-DD ',
				locale: moment.locale('zh-cn'),
				showTodayButton: true,
				showClose: true,
/*				minDate: '2017-10-01',
				maxDate: '2018-10-31',
				date: '2017-10-25',*/
				widgetPositioning: {
					horizontal: 'left',
					vertical: 'bottom'
				}
			});
			selectDate1.on('dp.hide',function(){
				/*if (!bool1 && !bool2) {
					//window.location.reload()
				}
				if (bool1) {
					bool1 = false;
					$('#canvas').css('display', 'none')
					$('#canvas1').css('display', 'block')
					$('#canvas2').css('display', 'none')
				}*/
				alert("点击时间1！");

			})
			var selectDate2 = $('#date2').datetimepicker({
				format: 'YYYY-MM-DD ',
				locale: moment.locale('zh-cn'),
				showTodayButton: true,
				showClose: true,
				widgetPositioning: {
					horizontal: 'right',
					vertical: 'bottom'
				}
			});
			selectDate2.on('dp.hide',function(){
				/*if (!bool1 && !bool2) {
					//window.location.reload()
				}
				if (bool2) {
					bool2 = false;
					$('#canvas').css('display', 'none')
					$('#canvas1').css('display', 'none')
					$('#canvas2').css('display', 'block')
					canvas = document.getElementById("canvas2");
					
				}*/
				alert("点击时间2！");
			})
			getJf();
			
		})
		//获取用户积分详情
		function getJf(){
			var canvas = document.getElementById("canvas");
			$.ajax({
				cache: false,
				type: "GET",
				url: "http://10.0.47.157:5555/attencepoint-service/tfPointDetailByDateAndBiId?biId=1&startDate=2017-11-01&endDate=2017-11-28",
				async: false,
				success: function(data) {
					console.log(data);
					if(data != null){
						$("#a").html(data[0].num);
						$("#b").html(data[1].num);
						$("#c").html(data[2].num);
						$("#jifenNum").html(data[0].num *1 + data[1].num *1 + data[2].num *1);
						
						myPie = new Chart(canvas.getContext("2d")).Pie(getData(Math.ceil(data[0].num),Math.ceil(data[1].num),Math.ceil(data[2].num)));
					}
				}
			});
		}
	</script>

</html>